<template>
  <div>
    <homeHead :showLeft="true" :name="'检索结果'"></homeHead>
    <div class="menu">
      <div class="gd-top">
        <a class="active">相关</a>
        <a>最新</a>
      </div>
      <span class="gd-right">
        <a @click="goTOMore('moreSearch')">高级检索</a>
      </span>
    </div>
    <div class="list-header">
      <!-- :top-method="loadTop"  -->
      <mt-loadmore
        :bottom-method="loadBottom"
        :auto-fill="false"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      >
        <ul class="listData">
          <li v-for="(item, index) in listData" :key="index">
            <div class="content">
              <span class="font" :title="item.题名" @click="goToDetail(item)">
                {{ item.题名 }}
              </span>
              <div class="recommond">
                <span class="name">
                  {{ item.作者 }}
                </span>
                <span class="time">
                  {{ item.发表时间 }}
                </span>
              </div>

              <div class="label" v-if="item.关键词">
                <ul>
                  <li>{{ item.关键词 }}</li>
                </ul>
              </div>

              <div class="set">
                <span class="line">
                  <img src="@/assets/iconImg/look.png" alt="" />
                  <span>{{ item.浏览频次 }}</span>
                </span>
                <span class="line">
                  <img src="@/assets/iconImg/down.png" alt="" />
                  <span>{{ item.下载频次 }}</span>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import homeHead from "./searchHead.vue";
import { getSearch } from "../../api/home";
import { getSearchMore } from "../../api/home";
export default {
  watch: {},
  name: "seachResult",
  data() {
    return {
      searchObj: {},
      listData: [],
      searchMoreObj: {},
      isSearchMore: false,
      allLoaded: false,
      pageCount: null,
      morePageCount: null,
    };
  },
  created() {
    if (this.$route.query.searchMore) {
      this.isSearchMore = true;
      this.searchMoreObj = JSON.parse(this.$route.query.searchMore);
      this.searchMoreObj.username = JSON.parse(
        window.localStorage.userInfo
      ).UserName;
      this.initMore();
    } else {
      this.searchObj = this.$route.query;
      this.searchObj.username = JSON.parse(
        window.localStorage.userInfo
      ).UserName;
      this.init();
    }
  },
  mounted() {
    let _this = this;
    //   激活样式
    $(".gd-top a").click(function (event) {
      $(this).addClass("active").siblings("a").removeClass("active");
      _this.searchObj.pagenow = 1;
      _this.searchMoreObj.pagenow = 1;
      if ($(this).text() === "最新") {
        _this.searchObj.orderstr = "发表时间 desc";
      } else {
        _this.searchObj.orderstr = "RELEVANT";
      }
      if (_this.isSearchMore) {
        _this.searchMoreObj.orderstr = _this.searchObj.orderstr;
        _this.initMore("change");
      } else {
        _this.init("change");
      }
    });
  },
  methods: {
    goToDetail(item) {
      let type = 1;
      let url = "";
      let data = JSON.stringify({
        dbcode: item.TABLENAME,
        sysid: item.SYS_FLD_SYSID,
        fileName:item.文件名,
        dbname:item.来源数据库,
        vsm:item.SYS_VSM,
      });

      if (this.searchObj.type === 2) {
        type = 2;
        url = window.localStorage.mirrorUrl+
          item.TABLENAME +
          "&filename=" +
          item.文件名;
      }

      if (this.searchObj.type === 1) {
        let ary = [
          "期刊",
          "博士",
          "硕士",
          "国内会议",
          "国际会议",
          "报纸",
          "年鉴",
          "中国专利",
          "海外专利",
          "国家标准",
          "行业标准",
          "中国标准",
          "国外标准",
          "成果",
          "法律法规",
          "工具书",
        ];
        ary.forEach((i) => {
          switch (item.来源数据库) {
            case i:
              type = 2;
              url =
                window.localStorage.mirrorUrl+
                item.TABLENAME +
                "&filename=" +
                item.文件名;
              break;
          }
        });
      }
      if(type === 2) {
        this.$router.push({
            path: "/cnkiDetail",
            query: {
              type,
              data,
              url,
              tableName:item.表名,
              name: item.题名,
            }
        })
      }else {
        this.$router.push({
            path: "/detail",
            query: {
              type,
              data,
              url,
              tableName:item.表名,
              name: item.题名,
            }
        })
      }
    },
    init(i) {
      if (i === "change") {
        this.listData = [];
      }
      this.searchObj.pagesize = 5;
      getSearch(this.searchObj).then((res) => {
        this.listData = this.listData.concat(JSON.parse(res.data.data));
        this.pageCount = res.data.DataCount;
      });
    },
    initMore(i) {
      if (i === "change") {
        this.listData = [];
      }
      this.searchMoreObj.pagesize = 5;
      getSearchMore(this.searchMoreObj).then((res) => {
        this.listData = this.listData.concat(JSON.parse(res.data.data));
        this.morePageCount = res.data.DataCount;
      });
    },
    goTOMore(className) {
      if (this.searchMoreObj.type) {
        this.$router.push(
          "/" +
            className +
            "?type=" +
            this.searchMoreObj.type +
            "&orderstr=" +
            this.searchMoreObj.orderstr
        );
      } else {
        this.$router.push(
          "/" +
            className +
            "?type=" +
            this.searchObj.type +
            "&orderstr=" +
            this.searchObj.orderstr
        );
      }
    },
    loadBottom() {
      if (this.pageCount - this.searchObj.pagenow * 5 <= 5) {
        this.allLoaded = true; // 若数据已全部获取完毕
        return;
      }
      if (this.morePageCount) {
        if (this.morePageCount - this.searchObj.pagenow * 5 <= 5) {
          this.allLoaded = true; // 若数据已全部获取完毕
          return;
        }
      }
      this.allLoaded = false;
      this.$refs.loadmore.onBottomLoaded();
      if (this.searchMoreObj.type) {
        this.searchMoreObj.pagenow++;
        this.initMore();
      } else {
        this.searchObj.pagenow++;
        this.init();
      }
    },
    loadTop() {
      if (this.searchMoreObj.type) {
        if (this.searchMoreObj.pagenow === 1) {
          this.allLoaded = false;
          this.$refs.loadmore.onTopLoaded();
          return;
        }
        this.searchMoreObj.pagenow--;
        this.initMore();
      } else {
        if (this.searchObj.pagenow === 1) {
          this.allLoaded = false; // 若数据已全部获取完毕
          this.$refs.loadmore.onTopLoaded();
          return;
        }
        this.searchObj.pagenow--;
        this.init();
      }
    },
  },
  components: {
    homeHead: homeHead,
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/zyy_phone.css";
@import "../../assets/css/search.css";
@import "../../assets/css/searchResult.css";
.list-header {
  height: calc(100vh - 120px);
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  ul {
    width: 100%;

    li {
      width: 100%;
      padding: 0 10px;
      .img {
        display: inline-block;
        width: 32px;
        height: 32px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        display: inline-block;
        height: 100%;
        vertical-align: top;
        width: calc(100% - 20px);
        position: relative;
        margin-bottom: 30px;

        .font {
          width: calc(100%);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          display: inline-block;
          font-weight: 600;
        }
        .i {
          position: absolute;
          right: 0;
          width: 100px;
          text-align: right;
          color: #989898;
        }
      }
      .recommond {
        font-size: 14px;
        margin-top: 5px;
        color: #868686;
      }
      .set {
        margin-top: 5px;
        text-align: right;
        img {
          width: 15px;
          height: 15px;
        }
        .line:nth-child(2) {
          margin-left: 10px;
        }
      }
    }

    li:nth-child(1) {
      margin-top: 10px;
    }

    li:last-child {
      margin-bottom: 0;
    }
  }
}
</style>